<!-- goCart -->
<template>
  <div class="cartIcon" @click="goCart">
    <div class="inner">
      <i class="iconfont icon-cart"></i>
      <mt-badge size="small" color="#f23030">{{cartNum}}</mt-badge>
    </div>
  </div>
</template>

<script>
  import {
    mapGetters
  } from 'vuex';
  export default {
    data() {
      return {};
    },
    computed: {
      ...mapGetters([
        'cartNum'
      ]),
      // thumbImg() {
      //    return this.productInfo.imgsList[0].goodsPath + '5.jpg';
      // },
    },
    watch: {},
    props: {
      backRouters: {
        type: String,
        default: '/'
      }
    },

    components: {},
    methods: {
      goCart() {
        this.$router.push('/cart')
      }
    },
    mounted() {
    }
  }
</script>
<style lang='scss' scoped>
  @import '~assets/common/css/mixin.scss';

  .cartIcon {
    position: fixed;
    bottom: 62px;
    right: 20px;
    z-index: 1000;
    @include wh(58px, 58px);
    padding: 5px;
    .inner {
      position: relative;
      border-radius: 50%;
      background: rgba(80, 80, 80, .9);
      box-shadow: 2px 2px 2px #ddd;
      border: 1px solid #ddd;
      height: 100%;
      .icon-cart {
        position: absolute;
        top: 9px;
        left: 9px;
        font-size: 27px;
        color: #fff;
      } //   @include bg("");
      .mint-badge {
        position: absolute;
        left: 29px;
        top: 5px;
        border: 1px solid #fff;
      }
      &:after {
        content: '';
        clear: both;
      }
    }
  }
</style>